<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

defineOptions({
  name: 'IntersectionObserver',
});
const boxNum = ref(10);
onMounted(() => {
  const io = new IntersectionObserver(
    (entries) => {
      // IntersectionObserverEntry 作为一个参数返回
      entries.forEach((item) => {
        if (item.isIntersecting) {
          boxNum.value += 10;
        }
      });
    },
    { root: null, rootMargin: '0px', threshold: [0] },
  );
  const loadMoreTrigger = document.querySelector(
    '#load-more-trigger',
  ) as HTMLElement;
  io.observe(loadMoreTrigger);
});
</script>
<template>
  <Page auto-content-height>
    <div id="root" class="divide-x divide-y border-black">
      <!-- <div class="box" v-for="item in boxNum" :key="item"></div> -->
      <img
        v-imgLazy="
          'https://bpic.588ku.com/video_library/cover/24/08/29/df615a300643b29f9cf0e6c75353bbda_snapshot_t0.jpg'
        "
        alt=""
        v-for="item in boxNum"
        :key="item"
      />
      <!-- 加载更多的触发元素 -->
      <div id="load-more-trigger"></div>
    </div>
  </Page>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 400px;
  // border: 1px solid black;
  background-color: black;
}
</style>
